<template>
  <div :class="{ 'description-item': inline }">
    <div class="description-item-title">
      <div>{{ title }}</div>
    </div>
    <div class="description-item-content" :style="{ textAlign: inline ? 'right' : 'left' }">
      <div>{{ showDefaultString(content, '暂无数据') }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { showDefaultString } from '../../../utils/common'
const props = withDefaults(
  defineProps<{ inline?: boolean; title: string; content: string | null | undefined }>(),
  {
    inline: true
  }
)
const { inline, title, content } = toRefs(props)
</script>

<style scoped>
.description-item {
  display: flex;
  font-size: 3.8vw;
  padding: 0.2vh 0;
}

.description-item-title {
  width: 30vw;
  color: #000;
  line-height: 5vw;
  font-weight: bold;
}

.description-item-content {
  flex: 1;
  line-height: 5vw;
  padding-bottom: 1vw;
}
</style>
